<template>
  <div class="homeMain">
    <div class="dataList" ref="dataList">
      <HomeState></HomeState>
      <ArticleList :articleWhere="{}" ref="ArticleListRef"></ArticleList>
    </div>
    <div class="card">
      <div ref="card">
        <home-card />
        <home-billboard />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent, onMounted, onBeforeMount } from 'vue'
// 文章列表
import ArticleList from '@/components/article/ArticleList.vue'
// 旁边的小卡片
const HomeCard = defineAsyncComponent(
  () => import('@/components/home/HomeCard.vue')
)
// 公告栏
const HomeBillboard = defineAsyncComponent(
  () => import('@/components/home/HomeBillboard.vue')
)
const HomeState = defineAsyncComponent(
  () => import('@/components/home/HomeState.vue')
)
// 触发请求函数
const ArticleListRef = ref()
onMounted(() => {
  ArticleListRef.value && ArticleListRef.value.getArticleList()
  window.scrollTo(0, 0)
  window.addEventListener('scroll', positionFn, {
    passive: true,
  })
})
// 一进来就让执行这个函数不然有问题

const card = ref<HTMLDivElement>()
const dataList = ref<HTMLDivElement>()
function positionFn() {
  if (!card.value) return
  if (!dataList.value) return
  const bodyScrollTop: number =
    document.documentElement.scrollTop || document.body.scrollTop

  dataList.value &&
    (card.value.style.position =
      bodyScrollTop > dataList.value.offsetTop ? 'fixed' : 'static')
}

onBeforeMount(() => {
  window.removeEventListener('scroll', positionFn)
})
</script>

<style lang="scss" scoped>
.homeMain {
  max-width: 1200px;

  width: 80%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;

  .dataList {
    width: 100%;
    flex: 1;
    margin-right: 30px;
  }
  .card {
    width: 280px;
    > div {
      transition: all 1s;
      position: static;
      top: 10px;
    }
  }
}

@media (max-width: 900px) {
  .card {
    display: none;
  }
}

@media (max-width: 760px) {
  .homeMain {
    width: 92%;
    margin: 20px auto;

    .dataList {
      margin-right: 0;
    }
  }
}
</style>
